<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员详情</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/homePage.css">
    <link rel="stylesheet" href="css/flexible.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/MD5.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div class="container_box" id="app">
    <div class="add_jl"><a href="index.html"><img src="images/back.png"></a></div>
    <template>
        <div class="group_details head_card_message clearfix" style="padding-right: 0.1rem;">
            <div class="fl head_card">
                <img :src="info.Picurl" alt="" class="spinning_img">
            </div>
            <div class="spinning_txt fl">
                <p style="margin-bottom: 0.1rem;">
                    <span class="font_size12">{{info.Username}}</span>
                    <!--<span class="spinning_txx">动感单车</span>-->
                    <span class="rf margintop10">
                            <a :href="'tel:'+info.Phone+''">
                       <img src="images/phone.png"/></a>
                    </span>
                </p>
                <p style="margin-bottom: 0.1rem;">
                    <a :href="'tel:'+info.Phone+''"><span class="spinning_name font_size12">{{info.Phone}}</span></a>
                </p>
            </div>
        </div>
        <div class="tar_qh">
            <ul class="nav">
                <li class="selected">会员卡</li>
                <li>出勤记录</li>
                <li>跟进记录</li>
            </ul>
            <div class="content">
                <div class="list">
                    <div v-if="card_list.length>0">
                        <div class="first_list" v-for="item in card_list">
                            <div class="card_head">
                                <p class="lf card_title">{{item.Cardname}}</p>
                                <p class="rf" v-if="item.Cardtype=='30'">储值卡</p>
                                <p class="rf" v-else-if="item.Cardtype=='20'">次数卡</p>
                                <p class="rf" v-else-if="item.Cardtype=='70'">计时卡</p>
								<p class="rf"v-else>期限卡</p>
                            </div>
                            <ul class="card_ul">
                                <li>
                                    <span class="after_hx">状态</span>
									<span v-if="item.State=='0'">正常</span>
									<span v-else-if="item.State=='1'">停用</span>
									<span v-else-if="item.State=='2'">转让</span>
									<span v-else-if="item.State=='3'">到期</span>
									<span v-else>请假</span>
                                </li>
                                <li>
                                    <span class="after_hx">余额</span><span>{{item.Surplus}}</span>
                                </li>
                                <li>
                                    <span class="after_hx">有效期</span> <span>{{item.SEtime}}</span>
                                </li>
                                <li>
                                    <span class="after_hx">入场</span> <span>{{item.SignCharge}}</span>
                                </li>
                            </ul>
                        </div>
                       
                    </div>
                    <div v-else style="text-align: center;margin-top:.3rem;">
                        <img src="images/notDate.jpg">
                    </div>
                </div>
                <div  class="list" style="display: none;">
                    <ul class="list_two">
                        <li @click="table(0)">
                            <p>{{enterNum}}次</p>
                            <p>累计入场</p>
                        </li>
                        <li @click="table(1)">
                            <p>{{groupNum}}次</p>
                            <p>累计团课</p>
                        </li>
                        <li @click="table(2)">
                            <p>{{privateNum}}次</p>
                            <p>累计私课</p>
                        </li>
                    </ul>
                </div>
                <div  class="list" style="display: none;">
                    <div class="addFollow" @click="addFollow()">+添加跟进记录</div>
                    <div v-if="list.length>0">
                        <div class="gj_Record" v-for="item in list">
                            <div class="lf progress_bar"></div>
                            <div class="gj_message">
                                <div class="gj_title">
                                    <p class="lf card_title" v-if="item.Follow==0">电话跟进</p>
                                    <p class="lf card_title" v-else-if="item.Follow==1">微信跟进</p>
                                    <p class="lf card_title" v-else-if="item.Follow==2">QQ跟进</p>
                                    <p class="lf card_title" v-else-if="item.Follow==3">短信跟进</p>
                                    <p class="lf card_title" v-else>面谈跟进</p>
                                    <p class="rf">跟进人：<span>{{item.Sname}}</span></p>
                                </div>
                                 <ul class="card_information">
                                    <li>
                                        {{item.Info}}
                                    </li>
                                    <li>
                                        <span>{{item.Addtime}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-else style="text-align: center;margin-top:.3rem;">
                        <img src="images/notDate.jpg">
                    </div>
                    
                </div>
            </div>
        </div>
    </template>
</div>
</body>
<script>
    $(function(){
        //获取点击事件的对象
        var divShow = $(".content").children('.list');
        $(divShow[1]).hide();
        $(divShow[2]).hide();
        $(".nav li").click(function(){
            //获取要显示或隐藏的对象
            var divShow = $(".content").children('.list');
            //判断当前对象是否被选中，如果没选中的话进入if循环
            if (!$(this).hasClass('selected')) {
                //获取当前对象的索引
                var index = $(this).index();
                //当前对象添加选中样式并且其同胞移除选中样式；
                $(this).addClass('selected').siblings('li').removeClass('selected');
                //索引对应的div块显示
                $(divShow[index]).show();
                //索引对应的div块的同胞隐藏
                $(divShow[index]).siblings('.list').hide();
            }
        });
    });
new Vue({
    el: '#app',
    data: {
        uid:'',
        info:{},
        card_list:[],
        enterNum:'',
        groupNum:'',
        privateNum:'',
        list:[]
    },
    created(){
        this.setCanS()
    },
    methods:{
         //设置参数
         setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.uid = Request['uid']
            this.getList()
        },
        //获取信息
        getList(){
            getVs()
            const params={
                uid:this.uid
            }
            axios.get('/mobileapi/adviser/user.php?act=user_card',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        data=data.data
                        this.info=data.data.info
                        if(this.info.Picurl==null||this.info.Picurl==''){
                            this.info.Picurl='images/moren.png'
                        }
                        this.card_list=data.data.card_list
						console.log(this.card_list)
                        this.enterNum=data.data.enterNum
                        this.groupNum=data.data.groupNum
                        this.privateNum=data.data.privateNum
                        this.list=data.data.list
                    }
                }).catch(function (error) { 
                    console.log(error); 
            });
        },
        addFollow(uid){
            window.location.href='memberFollow.html?uid='+this.uid+''
        },
        //返回首页
        back(){
            window.location.href='index.html'
        },
        table(type){
            //console.log(type)
            if(type=='0'){
                //入场记录
                window.location.href='admission.html?uid='+this.uid+''
            }else if(type=='1'){
                //团课记录
                let type='0'
                window.location.href='tkRecord.html?uid='+this.uid+'&type='+type+''
            }else{
                let type='1'
                //私课记录
                window.location.href='sjRecord.html?uid='+this.uid+'&type='+type+''
            }
        }
    }
})    
</script>
</html>